import "../styles/menu-button.scss";
import "./Menu.scss";

const menuButtonOpt = [
  {
    state: "Start",
    text: "Start",
  },
  {
    state: "Continue",
    text: "Continue",
  },
  {
    state: "Exit",
    text: "Exit",
  },
];

export default function Menu(props) {
  const { handleState } = props;

  return (
    <div className="menu">
      <h1 className="title">Header</h1>
      <div className="menu-buttons">
        {menuButtonOpt.map((item, key) => {
          return (
            <p key={key}>
              <button
                class="menu-button"
                onClick={() => handleState(item.state)}
              >
                {item.text}
              </button>
            </p>
          );
        })}
      </div>
      <img className="background" alt="no img!" src="logo192.png"></img>
    </div>
  );
}
